<template>
    <div class="header">
        管理员信息
    </div>
    <ul class="body">
        <li><span>账号：{{ username }}</span></li>
        <!-- <li><span>密码： {{ password }} </span></li> -->
        <li><span>用户类型:{{ categary == "" ? "管理员" : categary }}</span></li>
        <li>
            <el-button type="primary" round class="amend" @click="dialogVisible = true">修改密码</el-button>
        </li>
    </ul>
    <el-dialog v-model="dialogVisible" title="修改密码" width="30%" :before-close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
            <!-- <el-form-item label="账号：" prop="age">
                <el-input v-model="ruleForm.age" />
            </el-form-item> -->
            <el-form-item label="新密码：" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码：" prop="checkPass">
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="change()">修改</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
import axios from 'axios';
import md5 from 'js-md5';

import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import link from '@/util/api';

let router = useRouter()
let bankList = ref<Array<any>>([])

let username = ref<any>('')
let password = ref<any>('')
let categary = ref<any>("")

username = localStorage.getItem('username')

// element-plus组件中Dialog 对话框-----基础用法
const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm("确认关闭?", '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

// element-plus组件From表单---自定义校验规则
const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入账号'))
    } else {
        callback()
    }
}

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.checkPass !== '') {
            value
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('密码为空'))
    } else if (value !== ruleForm.pass) {
        callback(new Error("两次输入不匹配"))
    } else {
        callback()
    }
}

const ruleForm = reactive<any>({
    pass: '',
    checkPass: '',
})

const rules = reactive<FormRules>({
    pass: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})

// // 修改密码
const change = () => {
    console.log(username);
    console.log("------------", ruleForm.pass)
    link(`/admin/changepwsd?uname=${username}&password=${md5(ruleForm.pass)}`, "GET").then((res: any) => {
        console.log(md5(ruleForm.pass));
        console.log(res);
        if (res.status === 200) {
            ElMessage.success("修改成功")
            router.push("/login")
        } else {
            ElMessage.error("修改失败")
        }
    })
    // console.log(req.data.status.code)
    // if(req.data.status.code===200){
    //     ElMessage.success("修改成功")
    //     router.push("/login")
    // }else{
    //     ElMessage.error("修改失败")
    // }
}
const store = useStore()
// axios请求
// onMounted(async () => {
//     let res = await axios.get(`http://10.3.136.22/getAdmin?uname=${username}`).then((data: any) => {
//         console.log(res);
//         console.log(data);

//         console.log("=============================")
//         password.value = data.data[0].password
//         if (data.data.length > 0) {
//             categary.value = "管理员"
//         }
//     })
// })


</script>

<style lang="scss" scoped>
.header {
    font-size: 24px;
    color: #666;
    text-align: center;
}

.body {
    width: 650px;
    height: 350px;
    background-color: #f5f5f5;
    margin: auto;
    margin-top: 30px;

    li {
        padding: 25px;

        span {
            font-size: 18px;
            color: #666;

            .avatar-uploader .avatar {
                width: 150px;
                height: 150px;
                display: block;
            }
        }

        .amend {
            margin-top: 20px;
            margin-left: 260px;
        }
    }
}

.el-form-item {
    margin: 15px 0 15px 0;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    text-align: center;
}
</style>
